<script>
  export default {
    data() {
      return {
        description: "不知道吃什么？这个随机餐食选择器为您提供各种美味的餐食选项，满足您的口味需求。无论是计划用餐、决定外卖还是寻找下顿饭的灵感，它都能帮到您。不论是快餐还是盛宴，这个餐食选择器都能满足您的需求。"
      };
    },
    methods: {
      goToFoodList() {
        this.$router.push('/Wheel');
      }
    }
  };
  </script>


<template>
    <div class="main-container" @click="goToFoodList">
      <div class="text-container">
        <p class="description">{{ description }}</p>
      </div>
    </div>
  </template>
  
  
  
  <style scoped>
  .main-container {
    width: 100%;
    height: 100vh;
    background-image: url('../assets/img/image.png'); /* 替换为你实际的背景图片链接 */
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
  }
  
  .text-container {
    text-align: center;
    z-index: 1;
  }
  
  .description {
    font-size: 24px;
    color: transparent; /* 初始颜色透明，通过动画设置颜色 */
    -webkit-background-clip: text; /* 背景裁剪为文字形状 */
    background-clip: text;
    animation: colorChange 5s linear infinite; /* 调用颜色变化动画，持续5秒，线性，无限循环 */
  }
  
  @keyframes colorChange {
    0% {
      background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
    }
    14.28% {
      background-image: linear-gradient(to right, orange, yellow, green, blue, indigo, violet, red);
    }
    28.57% {
      background-image: linear-gradient(to right, yellow, green, blue, indigo, violet, red, orange);
    }
    42.86% {
      background-image: linear-gradient(to right, green, blue, indigo, violet, red, orange, yellow);
    }
    57.14% {
      background-image: linear-gradient(to right, blue, indigo, violet, red, orange, yellow, green);
    }
    71.43% {
      background-image: linear-gradient(to right, indigo, violet, red, orange, yellow, green, blue);
    }
    85.71% {
      background-image: linear-gradient(to right, violet, red, orange, yellow, green, blue, indigo);
    }
    100% {
      background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
    }
  }
  </style>